<?php
/**
 * Created by PhpStorm.
 * User: PanChaoZhi
 * Date: 2017/2/23
 * Time: 19:28
 */
?>

1、引用：
    模态框（Modal）是覆盖在父窗体上的窗体。通常目的是上一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。
    如果要单独使用该插件的功能，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

2、用法：
    通过 data 属性，在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier"来指定要切换的特定的模态框，要带有 id="identifier"。
    通过 JavaScript，使用这种方法，可以通过一行简单的 JavaScript 代码来调用带有 id="identifier" 的模态框：$("#identifier").modal(options);

3、options的具体属性：(在js里面用)
    .modal(options)  把内容作为模态框激活。接受一个可选的选项对象。
    .modal('toggle') 手动切换模态框。
    .modal('show')   手动打开模态框。
    .modal('hide')   手动隐藏模态框。

4、class属性介绍：
    class="modal fade", modal用来把<div>的内容识别为模态框，fade表示，当模态框被切换时，它会引起内容淡入淡出
    aria-labelledby="myModalLabel"，该属性引用模态框的标题
    aria-hidden="true"，用于保持模态窗口不可见，直到被触发为止


<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap的使用</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框标题
                </h4>
            </div>
            <div class="modal-body">
                模态框内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>


5、两种打开方式：

    <!-- 点击按钮方式打开模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal"
            data-target="#myModal">
        开始演示模态框
    </button>

    <!-- js方式打开模态框 -->
    <script type="text/javascript">
        jQuery(document).ready(function () {
            $("#myModal").modal('show');
        })
    </script>


</body>
</html>
